<template>
  <div class="f-container">
    <song-list
      class="album-body"
      :songList="collectSongList"
      :isFav="true"
    ></song-list>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { useStore } from "vuex";
import { HttpManager } from "@/api";
import SongList from "@/components/SongList.vue";

export default defineComponent({
  components: {
    SongList,
  },
  setup() {
    const collectSongList = ref([]); // 收藏的歌曲
    const store = useStore();
    // 获取收藏的歌曲
    async function getCollection(userId) {
      collectSongList.value = [];
      const result = (await HttpManager.getCollectionOfUser(
        userId
      )) as ResponseBody;
      const collectIDList = result.data || []; // 存放收藏的歌曲ID
      // 通过歌曲ID获取歌曲信息
      for (const item of collectIDList) {
        const result = (await HttpManager.getSongOfId(
          item.songId
        )) as ResponseBody;
        collectSongList.value.push(result.data[0]);
      }
    }

    onMounted(() => {
      getCollection(store.getters.userId);
      console.log(collectSongList.value);
    });
    return {
      collectSongList,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/var.scss";

.album-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;

  .album-img {
    height: 250px;
    width: 250px;
    border-radius: 10%;
  }

  .album-info {
    width: 70%;
    padding-top: 2rem;
  }
}

.album-main {
  h1 {
    font-size: 22px;
  }

  p {
    color: rgba(0, 0, 0, 0.5);
    margin: 10px 0 20px 0px;
  }
  /*歌单打分*/
  .album-score {
    display: flex;
    align-items: center;
    margin: 1vw;

    h3 {
      margin: 10px 0;
    }
    span {
      font-size: 60px;
    }
    & > div:last-child {
      margin-left: 10%;
    }
  }

  .album-body {
    margin: 20px 0 20px 0px;
  }
}

@media screen and (min-width: $sm) {
  .album-slide {
    position: fixed;
    width: 400px;
  }
  .album-main {
    min-width: 600px;
    padding-right: 10vw;
    margin-left: 400px;
  }
}

@media screen and (max-width: $sm) {
  .album-slide {
    display: none;
  }
}

.f-container {
  margin-bottom: 100px;
  width: 100vh;
  height: 1000px;
  margin-left: auto;
  margin-right: auto;
}
</style>
